<template>
<div class="dz" v-if="isdz">
    <div class="pad">
        <img :src = "imgurl">
        <div class="bg"></div>
        <h3>{{title}}</h3>
        <SpecialOptions :addid="addid"></SpecialOptions>
        <h4>价格￥{{price}}</h4>
        <input type="button" @click="addtoordered" value="添加进购物车">
    </div>
        <button @click="close" @touchend="close">✖</button>
</div>
</template>
<script>
import SpecialOptions from '@/components/SpecialOptions.vue'
export default {
  name: 'CustoMized',
  props: {
  },
  components: {
    SpecialOptions
  },
  computed: {
    isdz () {
      return this.$store.state.isdz
    },
    menuid () {
      return this.$store.state.menuid
    },
    addid () {
      return this.$store.state.dishes[this.menuid].addid
    }
  },
  data () {
    return {
      title: '',
      price: ''
    }
  },
  mounted: function () {
    setInterval(this.pageload, 10)
  },
  methods: {
    close: function () {
      this.$store.commit('DZ')
      this.$store.commit('SETADD1', '')
      this.$store.commit('SETADD2', '')
      this.$store.commit('SETADD3', '')
    },
    addtoordered: function () {
      if (this.$store.state.add1 !== '') {
        var add1 = { id: this.menuid, add1: this.$store.state.add1, add2: this.$store.state.add2, add3: this.$store.state.add3, name: this.$store.state.dishes[this.menuid].name, price: this.$store.state.dishes[this.menuid].price, imgurl: this.$store.state.dishes[this.menuid].imgurl }
        this.$store.commit('ORDER', add1)
        this.$store.commit('DZ')
        this.$store.commit('SETADD1', '')
        this.$store.commit('SETADD2', '')
        this.$store.commit('SETADD3', '')
      } else {
        this.$message('请选择' + this.$store.state.adds[this.addid].add1)
      }
    },
    pageload: function () {
      this.title = this.$store.state.dishes[this.menuid].name
      this.price = this.$store.state.dishes[this.menuid].price
      var img = this.$store.state.dishes[this.menuid].imgurl
      this.imgurl = require('../assets/menupic/' + img)
    }
  }
}
</script>
<style scoped lang="less">
.dz{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: rgba(85, 85, 85, 0.61);
    position: fixed;
    z-index: 100;
}
.pad{
    background: rgb(255, 255, 255);
    height: 430px;
    width: 350px;
    z-index: 100;
    align-self: center;
    margin-top: 25vh;
    border-radius: 10px;
}
.pad img{
    width: 100%;
    height: 40%;
    border-radius: 10px 10px 0 0;
}
.bg{
  position: absolute;
  width: 350px;
  height: 30px;
  margin-top: -34px;
  z-index: 0;
  background-color: rgba(24, 24, 24, 0.7);
}
h3{
  position: absolute;
  z-index: 1;
  color:white;
  margin:5px;
  margin-top: -32px;
}
h4{
    font-size: 20px;
    margin: 10px 0 0 10px;
}
.pad input{
    width: 150px;
    height: 4vh;
    position: absolute;
    margin-left: 188px;
    margin-top: -3.5vh;
    border-radius: 7px;
    border: 0;
    background: orange;
    color: white;
    font-size: 15px;
}
.dz button{
    width: 50px;
    height: 50px;
    align-self: center;
    margin-top: 10px;
    border-radius: 100%;
    background: grey;
    color: white;
    border: 0;
}
</style>
